
//表单验证
//找inpute和提示文字节点
let uname = document.querySelector("#uname")
let phone = document.querySelector("#phone")
let code = document.querySelector(".form p:nth-child(6) button")
let pswd = document.querySelector("#pswd")
// 复选框节点
let select = document.querySelector("#select")
//提示文字节点
let uname1 = document.querySelector(".form p:nth-child(4) span")
let phone1 = document.querySelector(".form p:nth-child(5) span")
let pswd1 = document.querySelector(".form p:nth-child(7) span")
// 立即注册节点
let register = document.querySelector("#register")
// console.log(uname,phone,code,pswd,select,register);
// console.log(uname1,phone1,pswd1)

//失焦事件
uname.addEventListener("blur", function () {
    if ((uname.value.length>6 && uname.value.length<20)||uname.value.length==0) {
        uname1.style.display = "none"
        uname.style.color = "green"
        // uname1.textContent = "可以使用"
    } else {
        uname1.style.display = "block"
    }
})
phone.addEventListener("blur", function () {
    //判断手机号
    if ((phone.value.length == 11)) {
        phone1.style.display = "none"
        phone.style.color = "green"
        code.disabled=false
    } else {
         phone1.style.display = "block"

    }
})
pswd.addEventListener("blur", function () {
    //判断密码
    if ((pswd.value.length>6 && pswd.value.length < 12)) {
        pswd1.style.display = "none"
        pswd.style.color = "green"
    } else {
        pswd1.style.display = "block"
    }
})


 //验证码 周期定时器
 code.addEventListener("click", function () {
    //console.log(111);
    //disabled是button的一个属性 禁止点击
    code.disabled = true
    let num = 5
    //验证码文本变为
    code.textContent = `正在发送(${num})`
    //周期定时器
    let time = setInterval(function () {
        num--
        code.textContent = `正在发送(${num})`
        if (num <= 0) {
            clearInterval(time)
            code.textContent = "获取验证码"
            code.disabled = false
        }
    }, 1000)
})

//复选框状态change事件
select.addEventListener("change", function () {
    //console.log(111);
    //判断复选框checked状态为ture 立即注册就打开，颜色改变,可以点击注册
    if (select.checked){
        register.style.background = "#00bdff"
        register.style.color = "#fff"
        //给立即注册添加点击事件  进行判断
        register.addEventListener("click", function () {
            //判断用户名
            if (uname.value.length < 6 || uname.value.length > 20) {
                uname1.style.display = "block"
            } else {
                uname1.style.display = "none"
                uname.style.color = "green"
                // uname1.textContent = "可以使用"
            }

            //判断手机号
            if (phone.value.length != 11) {
                phone1.style.display = "block"
            } else {
                phone1.style.display = "none"
                phone.style.color = "green"
            }

            //判断密码
            if (pswd.value.length < 6 || pswd.value.length > 12) {
                pswd1.style.display = "block"
            } else {
                pswd1.style.display = "none"
                pswd.style.color = "green"
            }
        })
        // select.checked=flase 就关闭按钮不能点击提交注册
    } else {
        register.style.background = ""
        register.style.color = ""
    }
})


